<html>
    <header>
        <style>
            p {
                text-align: justify;
            }
        </style>
    </header>

    <body>
        <div>
            <h3><ui-label value="i18n:many-widgets.step1"></ui-label>:</h3>
            <p><ui-label value="i18n:many-widgets.joystick2DStep1"></ui-label></p>
        </div>
        <br />
        
        <div>
            <h3><ui-label value="i18n:many-widgets.step2"></ui-label>:</h3>
            <p><ui-label value="i18n:many-widgets.joystick2DStep2"></ui-label></p>
        </div>
        <br />

        <div>
            <h3>API:</h3>
            <ui-code language="typescript">
                /*
                Set the node to control.
                You may directly drag the target node on the MWJoystick2D component.
                */
                setTargetNode(targetNode: Node)

                /*
                Set the target node's speed.
                */
                setSpeed(speed: number)

                /*
                Limit the movement range of the target node.
                */
                setBorder()

                /*
                No limitation on target node's movement range.
                */
                clearBorder() 
            </ui-code>
        </div>
    </body>
</html>
